<template>
	<view  style="margin-top: -37rpx; ">
		<view style="padding: 8rpx;height: 130rpx;">
			<view style="margin-top: 15rpx;margin-left: 140rpx;">
	            <image  style=" width: 70rpx;height: 70rpx; border-radius: 100rpx;" :src="img"></image>
			</view>
			<view style="margin-top: -70rpx;margin-left: 235rpx;">
				<text class="fonts" style="font-weight: 700;">{{ptname}}平台直播间列表</text>
			</view>
		</view>
		<view class="listv row jsbg" >
			<view class="list" v-for="item in zhubo" :key="item.id" @tap="play(item)">
				<image :src="item.img" mode="aspectFill"></image>
				<text  class="live">直播中</text>
					<view style="margin: 10rpx;">
					<image class="jstoux" :src="item.img" mode=""></image>
					<text class="font" >{{item.title}}</text>					
					
					</view>
					<view style="margin-top: 30rpx;"></view>
					</view>
					
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fangjian:'',
				ptname:'',
				img:'',
				height:190,
				zhubo:[],
				zhubos:''
				
			}
		},
		computed: {
		},
		onLoad(item) {
			this.ptname = item.fjname;
			this.img = item.img;
			this.fangjian = item.fangjian;
            let fangjian = this.fangjian;
            this.GetJson(this.ip+'zhubo.php', 'POST', {zhubo:this.fangjian}, e => {
            this.zhubo = e.zhubo;
            })
			
		},
		onReady() {
		},
		methods: {
			play() {
			uni.navigateTo({
			url: 'play?fangjian=' + this.fangjian
			})
				
			},
			plays(item) {
				let url = item.address;
				let name = item.title;
				let img = item.img;
				let ptname = this.ptname;
				uni.navigateTo({
					url: 'video?url=' + url + '&name=' + name + '&img=' + img + '&ptname=' + ptname
				})
			}
		},
		onNavigationBarButtonTap(e) {
			console.log(e);
			if (e.index < 2) {
				uni.navigateTo({
					url: '../city/city'
				})
				uni.$once('adder', (data) => {
					if (data != null) {
						this.$store.state.city = data;
					}
				});
			}else{
				uni.navigateTo({
					url:'../sou/sou',
					animationType:'fade-in'
				})
			}
		},
		onPullDownRefresh() {
			this.getdata(true);
		},
		watch: {
			'$store.state.city':{
				handler(newitem, old) {
					console.log(newitem)
					if (newitem != old && newitem != null) {
						this.$scope.$getAppWebview().setTitleNViewButtonStyle(1, {
							text: newitem
						})
						this.getdata(true);
					}
				},
				immediate: true
			}
		}
	}
</script> 

<style>
	page{
		background-color: #181b2e;
		margin-top: 100rpx;
	}
	.font{
		background-image: linear-gradient(to right ,#d71af9,#f9c71a);
		-webkit-background-clip: text; 
		-webkit-text-fill-color: transparent;
	}
	.fonts{
		background-image: linear-gradient(to right ,#5a18d1,#9B63FF);
		-webkit-background-clip: text; 
		-webkit-text-fill-color: transparent;
	}
.live{
	display: inline-block;
	text-align: center;
	width: 100rpx;
	height: 50rpx;
    line-height: 50rpx;
    padding: 0 5rpx;
    font-size: 26rpx;
    color: #ffffff;
    background-color: rgba(0,0,0,0.5);
    border-radius: 10rpx;
    position: absolute;
    top: 10rpx;
    left: 65%;
    z-index: 99;
}
	.jsbg{
		
		background-color: #181b2e;
		border-radius: 10rpx;
		margin: 14rpx;
	}

	.listv {
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 20rpx;
		
	}

	.list {
		/*box-shadow: 8rpx 4rpx 8rpx 4rpx rgba(0, 0, 0, 0.05);*/
		position: relative;
		z-index: 1;
		background-color: #262a47;
		width: 347rpx;
		margin-bottom: 30rpx;
		animation: opacitys .1s;
	}

	.list>image {
		width: 347rpx;
		height: 450rpx;
		border-radius: 20rpx;
		background-color: #f3f1f1;
	}

	.list>view>image {
		width: 60rpx;
		height: 60rpx;
		top:15rpx;
		border-radius: 100px;
		margin-right: 10rpx;
		background-color: #f3f1f1;
	}


</style>
